<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编辑商品信息</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
  <style>
    .form-group {
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
<form class="form-horizontal" id="editGoodsForm">
  <input type="hidden" id="id" name="id">
  <div class="form-group">
    <label for="inputTitle" class="col-sm-2 control-label">商品标题</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputTitle" placeholder="请输入商品标题">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputPrice" placeholder="请输入商品价格">
    </div>
  </div>
  <div class="form-group">
    <label for="inputDescr" class="col-sm-2 control-label">商品描述</label>
    <div class="col-sm-10">
      <textarea cols="90" rows="10" id="inputDescr"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label for="file" class="col-sm-2 control-label">商品图片</label>
    <div class="col-sm-10">
      <input type="file" style="width: 60%" class="form-control" id="file" onchange="uploadImg()">
      <!-- 商品上传完毕后要即时显示上传效果 -->
      <img src="" id="myimg" style="width: 100px;">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-primary" onclick="submitEditForm()">保存</button>
    </div>
  </div>
</form>

<script>
  // 获取 URL 中的商品 ID
  const urlParams = new URLSearchParams(window.location.search);
  const id = urlParams.get('id');

  // 页面加载完成后获取商品信息并填充表单
  $(document).ready(function() {
    $.ajax({
      url: 'getGoodsById',
      type: 'GET',
      data: { id: id },
      dataType: 'json',
      success: function(res) {
        if (res.code === 200) {
          const goods = res.data;
          $('#id').val(goods.id);
          $('#inputTitle').val(goods.title);
          $('#inputPrice').val(goods.price);
          $('#inputDescr').val(goods.descr);
          $('#myimg').attr('src', goods.img);
        } else {
          alert('获取商品信息失败: ' + res.msg);
        }
      },
      error: function(xhr, status, error) {
        alert('请求失败: ' + error);
      }
    });
  });

  // 上传图片
  function uploadImg() {
    // 这里可以实现图片上传逻辑，暂时省略
    console.log('图片上传功能待实现');
  }

  // 提交编辑表单
  function submitEditForm() {
    const id = $('#id').val();
    const title = $('#inputTitle').val();
    const price = $('#inputPrice').val();
    const descr = $('#inputDescr').val();
    const img = $('#myimg').attr('src');

    $.ajax({
      url: 'updateGoods',
      type: 'POST',
      data: {
        id: id,
        title: title,
        price: price,
        descr: descr,
        img: img
      },
      success: function(res) {
        if (res.code === 200) {
          alert('商品信息更新成功');
          window.location.href = 'allGoods.html';
        } else {
          alert('商品信息更新失败: ' + res.msg);
        }
      },
      error: function(xhr, status, error) {
        alert('请求失败: ' + error);
      }
    });
  }
</script>
</body>
</html>